<template>
	<view class="all" :style="{'padding-top':topheight+20+'px'}">
		<!-- 导航栏 -->
		<navigation :showIcon="true" title="订单列表" @topHeight="topHeightFn"></navigation>
		<view class="top" :style="{top:topheight+'px'}">
			<view style="display: flex;position: relative;">
				<view class="search">
					<input type="text" value="" v-model="value" confirm-type="search" @confirm="searchFn" placeholder="搜索我的订单"
					 placeholder-style="color:#D6D6D6" />
					<icon class="searchIcon" @click="searchFn" type="search" size="26upx"></icon>
				</view>
				<view class="screen" @click="showFilter">
					筛选
				</view>
			</view>
			<!-- 顶部选项卡 -->
			<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
				<view v-for="(item,index) in check_status.items" :key="index" class="nav-item" :class="{current: index === currentIndex}"
				 :id="'tab'+index" @click="changeTab(index)">{{item.title}}</view>
			</scroll-view>
		</view>
		<view class="allOrder">
			<view class="orderBox" v-for="(item,index) in list_data" :key="index">
				<view class="image">
					<image src="../../static/orderImgs/changeOrder.png" mode="" v-if="item.process==2"></image>
					<image src="../../static/orderImgs/returnOrder.png" mode="" v-if="item.process==-1"></image>
				</view>
				<view class="title">
					<text class="number">合同号:{{item.contract_no}}</text>
					<text class="status">{{item.order_type}}-{{item.status}}</text>
				</view>
				<view class="info">
					<view class="left">
						<view class="con">
							<text class="txt1">签约公司：</text>
							<text class="txt2">{{item.company_id}}</text>
						</view>
						<view class="con">
							<text class="txt1">签约日期：</text>
							<text class="txt2">{{item.sign_date}}</text>
						</view>
						<view class="con">
							<text class="txt1">酒店名称：</text>
							<text class="txt2">{{item.hotel_text}}</text>
						</view>
						<view class="con">
							<text class="txt1">新娘姓名：</text>
							<text class="txt2">{{item.bride}}</text>
						</view>
						<view class="con">
							<text class="txt1">新郎姓名：</text>
							<text class="txt2">{{item.bridegroom}}</text>
						</view>
					</view>
					<view class="right">
						<view class="con">
							<text class="txt1">订单类型：</text>
							<text class="txt2">{{item.news_type}}</text>
						</view>
						<view class="con">
							<text class="txt1">举办日期：</text>
							<text class="txt2">{{item.event_date}}</text>
						</view>
						<view class="con">
							<text class="txt1">合作模式：</text>
							<text class="txt2">{{item.cooperation_mode}}</text>
						</view>
						<view class="con">
							<text class="txt1">新娘电话：</text>
							<text class="txt2">{{item.bride_mobile}}</text>
						</view>
						<view class="con">
							<text class="txt1">新郎电话：</text>
							<text class="txt2">{{item.bridegroom_mobile}}</text>
						</view>
					</view>
				</view>
				<view class="detail" @click="lookDetailFn(item.id)">
					<text>查看详情</text>
					<image src="../../static/images/right.png" mode=""></image>
				</view>
				<view class="detail" @click="viewAudit(item.id)">
					<text>查看审核</text>
					<image src="../../static/images/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="" v-if="defaultShow" style="width: 100%;height: 50upx; line-height: 50upx;text-align: center; font-size: 28upx; color: #555555;">
			没有更多了
		</view>
		<!-- 筛选框 -->
		<uni-drawer :visible="isFilter" mode="right" @close="screenClose">
			<view class="content">
				<view class="con_box">
					<text class="title">审核状态</text>
					<view class="list_box">
						<view class="view_box" v-for="(item,index) in check_status.items" :key="index" :class="index==currentIndex?'actived':''"
						 @click="selectStatus(index)">
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
				<view class="con_box">
					<text class="title">签约公司</text>
					<scroll-view scroll-y="true" style="height: 200upx;">
						<view class="list_box">
							<view class="view_box" v-for="(item,index) in company_id.items" :key="index" :class="index==companyIndex?'actived':''"
							 @click="selectCompany(index)">
								<text>{{item.title}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="con_box" v-if="user_id.items.length>=1">
					<text class="title">人员列表</text>
					<scroll-view scroll-y="true" style="height: 200upx;">
						<view class="list_box">
							<view class="view_box" v-for="(item,index) in user_id.items" :key="index" :class="item.status?'actived':''"
							 @click="selectPeople(index)">
								<text>{{item.title}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="con_box">
					<text class="title">筛选时间类型</text>
					<view class="list_box">
						<view class="view_box" v-for="(item,index) in range_type.items" :key="index" :class="index==timeIndex?'actived':''"
						 @click="selectTime(index)">
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
				<view class="con_box">
					<text class="title">时间筛选</text>
					<view class="list_box">
						<view class="view_box" v-for="(item,index) in range.items" v-if="index!=4&&index!=5" :class="index==dateIndex?'actived':''"
						 @click="selectDate(index)" :key="index">
							<text>{{item.title}}</text>
						</view>

						<!--  <picker mode="date"   @change="bindDateChangeStart">						  
					     <view class="view_box" :class="index==dateIndex?'actived':''" v-if="index==4"  v-for="(item,index) in range.items" :key="index"  @click="selectDate(index)">							
						   <text >{{item.title}}</text>
						 </view>
					  </picker> -->
						<timeSelector showType="yearToMinute" @btnConfirm="bindDateChangeStart" @btnCancel="btnCancel">
							<!-- <uni-list-item :rightText="nextTime" :rightTextSize="26" rightTextColor="#1E1E1E"  title="下次回访时间" :titleSize="26" titleColor="#8E8E8E" :show-extra-icon="true" :extra-icon="{color: '#333333',size: '17',type: 'spinner'}"></uni-list-item> -->
							<view class="view_box" :class="index==dateIndex?'actived':''" v-if="index==4" v-for="(item,index) in range.items"
							 :key="index" @click="selectDate(index)">
								<text>{{item.title}}</text>
							</view>
						</timeSelector>

						<!-- <picker mode="date"   @change="bindDateChangeEnd">
						  <view class="view_box" :class="index==dateIndex?'actived':''" v-if="index==5"   v-for="(item,index) in range.items" :key="index"  @click="selectDate(index)">
						     <text >{{item.title}}</text>						  	
						  </view>
					  </picker> -->
						<timeSelector showType="yearToMinute" @btnConfirm="bindDateChangeEnd" @btnCancel="btnCancel">
							<view class="view_box" :class="index==dateIndex?'actived':''" v-if="index==5" v-for="(item,index) in range.items"
							 :key="index" @click="selectDate(index)">
								<text>{{item.title}}</text>
							</view>
						</timeSelector>
					</view>
				</view>
			</view>
			<view class="btn">
				<button type="default" class="reset" @click="replacementFn">重置</button>
				<button type="default" class="save" @click="saveGet()">保存</button>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import timeSelector from '@/component/wing-time-selector/wing-time-selector.vue';
	import sun from '@/utils/sun.js'
	import navigation from '@/component/navigation.vue'
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		components: {
			navigation,
			timeSelector
		},
		data() {
			return {
				topheight: '',
				value: '', //搜索内容
				isFilter: false, //是否显示筛选框
				currentIndex: 0, //默认选中位置
				status: ['全部状态', '待审核', '审核中', '审核驳回', '审核通过', '已完成'], //审核状态
				companyIndex: 0, //公司索引
				companey: ['全部', '红丝', '誉思', '曼格纳'], //签约公司
				peopleIndex: 0, //人员索引
				people: ['全部成员', '张三', '李四'], //人员列表
				timeIndex: 0, //时间类型索引
				timeList: ['所有时间', '举办时间', '签单时间', '录入时间'], //筛选时间类型
				dateIndex: 0, //时间索引
				dateList: ['全部时间', '今天', '本周', '本月', '开始时间', '结束时间'], //筛选时间

				page: 0,
				user: '', //个人信息
				list_data: [], //订单列表
				defaultShow: false, //是否显示 没有更多了

				check_status: [], //审核状态
				company_id: '', //签约公司
				range: '', //时间区间
				range_type: '', //时间类型
				user_id: {
					items: []
				}, //人员
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
			}
		},
		onLoad() {
			this.filterData()
			this.getData({})
			this.topheight = sun.getStatusBarHeight()

			this.user = uni.getStorageSync('user')
			windowWidth = uni.getSystemInfoSync().windowWidth;
		},
		onReachBottom() {
			++this.page;
			if (this.defaultShow) {
				return;
			} else {
				this.getData({
					page: this.page,
					check_status: this.check_status.items[this.currentIndex].id,
					company_id: this.company_id.items[this.companyIndex].id, //签约公司
					range: this.range.items[this.dateIndex].id == 'start_date' || this.range.items[this.dateIndex].id ==
						'end_date' ? this.range.items[4].title + '~' + this.range.items[5].title : this.range.items[this.dateIndex].id, //时间区间
					range_type: this.range_type.items[this.timeIndex].id, //时间类型
					user_id: this.user_id.result, //人员
					keywords: this.value,
				})
			}
		},
		methods: {
			topHeightFn(e) {
				this.topheight = e
			},
			getData(e) {
				let that = this
				sun.request({
					url: "/h5/order.order/index",
					showLoading: true,
					token: true,
					data: {
						limit: 5, //条数
						page: e.page ? e.page : that.page,
						user_id: e.user_id ? e.user_id : '',
						check_status: e.check_status || e.check_status == 0 ? e.check_status : '',
						company_id: e.company_id ? e.company_id : '',
						range_type: e.range_type ? e.range_type : '',
						range: e.range ? e.range : '',
						keywords: e.keywords ? e.keywords : ''
					},
					success(res) {
						if (res.code == 200) {
							if (res.data.orderlist.length < 1) {
								that.defaultShow = true;
							}
							that.list_data = that.list_data.concat(res.data.orderlist);
						}
					},
					fail(e) {
						uni.showToast({
							icon: "none",
							title: "服务器开小差去啦~",
						})
					}
				})

			},
			//筛选条件
			filterData(e) {
				let that = this
				sun.request({
					url: "/h5/order.search/items",
					showLoading: true,
					token: true,
					data: {},
					success(res) {
						if (res.code == 200) {
							let data = res.data;
							that.check_status = data.check_status; //审核状态
							that.company_id = data.company_id; //签约公司
							that.range = data.range; //时间区间
							that.range_type = data.range_type; //时间类型
							that.user_id = data.user_id; //人员

							that.user_id.items.map((item, index) => {
								item.status = false;
								if (index == 0) {
									item.status = true;
								}
							})

						}
					},
					fail(e) {
						uni.showToast({
							icon: "none",
							title: "服务器开小差去啦~",
						})
					}
				})

			},
			//显示筛选框
			showFilter() {
				this.isFilter = true;
			},
			//隐藏筛选框
			hideFilter() {
				this.isFilter = false;
			},
			//关闭筛选框
			screenClose() {
				this.isFilter = false;
			},
			//选择审核状态
			selectStatus(index) {
				this.currentIndex = index;
				this.page = 0;
				this.list_data = [];
				this.getData({
					page: this.page,
					check_status: this.check_status.items[this.currentIndex].id,
					company_id: this.company_id.items[0].id, //签约公司
					range: this.range.items[0].id == 'start_date' || this.range.items[0].id == 'end_date' ? this.range.items[4].title +
						'~' + this.range.items[5].title : this.range.items[0].id, //时间区间
					range_type: this.range_type.items[0].id, //时间类型
					user_id: 'all', //人员
					keywords: '',
				})
			},
			//选择公司
			selectCompany(index) {
				this.companyIndex = index;
			},
			//选择人员
			selectPeople(index) {
				this.peopleIndex=index;
				// console.log(this.user_id.items)
				if (index != 0) {
					this.user_id.items[0].status = false
				}
				if (index === 0) {
					this.user_id.items.map((item, index) => {
						item.status = false
					})
				}
				this.user_id.items[index].status = !this.user_id.items[index].status;
				this.$forceUpdate();
			},
			//选择时间类型
			selectTime(index) {
				this.timeIndex = index;
			},
			//选择时间
			selectDate(index) {
				this.dateIndex = index;
				this.$forceUpdate();
			},
			bindDateChangeStart(e) {
				// console.log(e);
				this.range.items[4].title = e.ymd;
				this.dateIndex = 4;
				this.$forceUpdate();
			},
			btnCancel() {
				console.log('取消时间：');
			},
			bindDateChangeEnd(e) {
				this.range.items[5].title = e.ymd;
				this.dateIndex = 5;
				this.$forceUpdate();
			},
			//搜索订单
			searchFn() {
				this.defaultShow = false
				this.page = 0;
				this.list_data = []
				this.getData({
					keywords: this.value
				})
			},
			//进入详情页
			lookDetailFn(id) {
				// uni.navigateTo({
				// 	url: "../orderInfo/goodsDetail/goodsDetail?id=" + id
				// })
				uni.navigateTo({
					url: "../order/detail/detail?order_id=" + id
				})
			},
			viewAudit(id) {
				uni.navigateTo({
					url: "../orderInfo/myApproval/myApproval?id=" + id
				})
			},
			//重置
			replacementFn() {
				this.currentIndex = 0 //审核索引
				this.companyIndex = 0 //公司
				this.peopleIndex = 0 //人员
				this.timeIndex = 0 //时间类型
				this.dateIndex = 0 //时间
			},
			//保存
			saveGet() {

				let that = this
				that.defaultShow = false
				if (that.range.items[4].title != '开始时间' || that.range.items[5].title != '结束时间') {

					if (that.range.items[4].title == '开始时间') {
						uni.showToast({
							icon: "none",
							title: "请选择开始时间"
						})
						return
					}
					if (that.range.items[5].title == '结束时间') {
						uni.showToast({
							icon: "none",
							title: "请选择结束时间"
						})
						return
					}

				}



				var promise = new Promise((resolve, reject) => {
					that.user_id.result = []
					that.page = 0;
					that.list_data = [];
					if (that.user_id.items.length >= 1) {
						that.user_id.items.map((item, index) => {
							if (item.status) {
								that.user_id.result.push(item.id)
							}
						})
						that.user_id.result = that.user_id.result.join(',')
					}
					resolve()
				})

				promise.then(() => {
					that.getData({
						check_status: that.check_status.items[that.currentIndex].id, //审核状态
						company_id: that.company_id.items[that.companyIndex].id, //签约公司
						range: that.range.items[that.dateIndex].id == 'start_date' || that.range.items[that.dateIndex].id ==
							'end_date' ? that.range.items[4].title + '~' + that.range.items[5].title : that.range.items[that.dateIndex].id, //时间区间
						range_type: that.range_type.items[that.timeIndex].id, //时间类型
						user_id: that.user_id.result, //人员
						keywords: that.value,
					})
					that.isFilter = false; //关闭筛选框

				})

			},
			//tab切换
			async changeTab(e) {
				//搜索之后 清空
				// if(e==0){
				// 	this.screenObj.user_id.result
				// }
				this.page = 0;
				this.list_data = [];
				this.defaultShow = false;
				if (scrollTimer) {
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof e === 'object') {
					index = e.detail.current
				}
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if (typeof e === 'number') {
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.currentIndex = index;
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					if (typeof e === 'object') {
						this.currentIndex = index;
					}
					this.currentIndex = index;


					//第一次切换tab，动画结束后需要加载数据
					// let tabItem = this.tabBars[this.tabCurrentIndex];
					// if(this.tabCurrentIndex !== 0){
					// this.loadNewsList('add');						
					// tabItem.loaded = true;
					// console.log(this.tabCurrentIndex,'llllllllllll')
					// console.log(this.check_status.items[this.tabCurrentIndex].id,'2222222222')
					// }

					this.getData({
						page: this.page,
						check_status: this.check_status.items[this.currentIndex].id, //审核状态
						company_id: this.company_id.items[0].id, //签约公司
						range: this.range.items[0].id == 'start_date' || this.range.items[0].id == 'end_date' ? this.range.items[4].title +
							'~' + this.range.items[5].title : this.range.items[0].id, //时间区间
						range_type: this.range_type.items[0].id, //时间类型
						user_id: 'all', //人员
						keywords: '',
					})
				}, 300)

			},
			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},

		}
	}
</script>

<style lang="less">
	page {
		background: #F4F4F4;
		padding-top: 0;
	}

	.top {
		width: 100%;
		// height: 150upx;
		background: #FFFFFF;
		padding: 0upx 0 10upx 19upx;
		box-sizing: border-box;
		position: fixed;
		top: 203upx;
		left: 0;
		z-index: 10;

		.left {
			width: 50upx;
			height: 58upx;
			display: flex;
			align-items: center;
			float: left;

			image {
				width: 40upx;
				height: 40upx;
			}
		}

		.search {
			width: 576upx;
			height: 58upx;
			margin-left: 10upx;
			float: left;

			input {
				width: 576upx;
				height: 58upx;
				background: rgba(255, 255, 255, 1);
				border: 1upx solid rgba(238, 238, 238, 1);
				border-radius: 29upx;
				padding-left: 45upx;
				box-sizing: border-box;
			}

			.searchIcon {
				position: absolute;
				right: 200upx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.screen {
			width: 55upx;
			height: 58upx;
			font-size: 26upx;
			color: #406CEB;
			margin-left: 10upx;
			line-height: 58upx;
		}
	}

	/* 顶部tabbar */
	.nav-bar {
		// position: fixed;
		// left: 0;
		// top:230upx;
		// z-index: 10;
		// height: 90upx;
		padding: 20upx 0;
		// line-height: 90upx;		
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;

		.uni-scroll-view-content {}

		.nav-item {
			display: inline-block;
			padding: 5upx 20upx;
			text-align: center;
			font-size: 30upx;
			color: #303133;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #007aff;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #FFFFFF;
			background: rgba(64, 108, 235, 1);
			border-radius: 21upx;

			&:after {
				width: 50%;
			}
		}
	}

	.allOrder {
		width: 100%;
		height: 100%;
		padding: 24upx;
		margin-top: 110upx;
		box-sizing: border-box;

		.orderBox {
			width: 702upx;
			// height: 370upx;
			background: #FFFFFF;
			margin-bottom: 24upx;
			border-radius: 15px;
			position: relative;

			.title {
				width: 100%;
				height: 72upx;
				padding-left: 24upx;
				padding-right: 24upx;
				box-sizing: border-box;
				font-size: 26upx;
				border-bottom: 1upx solid #eeeeee;
				display: flex;
				align-items: center;
				position: relative;

				.number {
					width: auto;
					height: 25upx;
					color: #333333;
					display: block;
					float: left;
				}

				.status {
					// width:78upx;
					height: 25upx;
					display: block;
					color: #F7B55F;
					position: absolute;
					right: 24upx;
				}
			}
		}
	}

	.image {
		image {
			width: 200upx;
			height: 200upx;
			position: absolute;
			right: -40upx;
			top: -40upx;
			z-index: 5;
			animation-name: mychange;
			animation-duration: 500ms;
		}
	}

	@keyframes mychange {
		0% {
			position: absolute;
			right: -20upx;
			top: -20upx;
			z-index: 5;
			transform: scale(1.3);
		}

		50% {
			position: absolute;
			right: -20upx;
			top: -20upx;
			z-index: 5;
			transform: scale(1.3);
		}

		100% {
			position: absolute;
			right: -40upx;
			top: -40upx;
			z-index: 5;
			transform: scale(1);
		}
	}

	.allOrder .orderBox .info {
		width: 100%;
		height: 222upx;
		border-bottom: 1upx solid #eeeeee;
		padding-left: 24upx;
		box-sizing: border-box;

		.left {
			width: 50%;
			height: 100%;
			float: left;

			.con {
				width: 100%;
				height: 45upx;
				display: flex;
				align-items: center;

				.txt1 {
					width: 120upx;
					height: 45upx;
					font-size: 24upx;
					color: #666666;
					line-height: 45upx;
				}

				.txt2 {
					width: 200upx;
					height: 45upx;
					font-size: 24upx;
					color: #666666;
					line-height: 45upx;
					text-overflow: ellipsis;
					overflow: auto;
					white-space: nowrap;
				}
			}
		}

		.right {
			width: 50%;
			height: 100%;
			float: right;

			.con {
				width: 100%;
				height: 45upx;
				display: flex;
				align-items: center;
				box-sizing: border-box;

				.txt1 {
					width: 120upx;
					height: 45upx;
					font-size: 24upx;
					color: #666666;
					line-height: 45upx;
				}

				.txt2 {
					width: 200upx;
					height: 45upx;
					font-size: 24upx;
					color: #666666;
					line-height: 45upx;
					text-overflow: ellipsis;
					overflow: auto;
					white-space: nowrap;
				}
			}
		}
	}

	.allOrder .orderBox .detail {
		width: 100%;
		height: 72upx;
		padding-left: 24upx;
		padding-right: 24upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;

		text {
			width: 104upx;
			height: 25upx;
			display: block;
			font-size: 26upx;
			color: #666666;
		}

		image {
			width: 32upx;
			height: 32upx;
			display: block;
			position: absolute;
			right: 24upx;
		}
	}

	// 筛选框
	.content {
		margin-top: 40upx;

		.con_box {
			margin-top: 10upx;

			.title {
				width: 100%;
				height: 25upx;
				font-size: 26upx;
				color: #666666;
				font-weight: 500;
				font-family: PingFang SC;
				padding: 0 24upx;
				box-sizing: border-box;
			}

			.list_box {
				padding: 0 24upx;
				box-sizing: border-box;
				display: flex;
				justify-content: left;
				flex-wrap: wrap;

				.view_box {
					width: 160upx;
					height: 66upx;
					padding: 2upx;
					display: flex;
					justify-content: center;
					align-items: center;

					margin-top: 16upx;
					margin-right: 16upx;
					font-size: 24upx;
					white-space: wrap;
					color: #666666;
					background: #F6F6F6;
					border-radius: 5px;

					text {
						text-align: center;
					}
				}

			}
		}
	}

	//选中状态
	.actived {
		background: #EEF2FF !important;
		border: 1upx solid #406CEB;
		color: #406CEB !important;

	}

	.btn {
		width: 100%;
		height: 73upx;
		position: absolute;
		bottom: 33upx;
		display: flex;
		justify-content: center;

		button {
			width: 214upx;
			height: 73upx;
			line-height: 73upx;
			font-size: 28upx;
			border-radius: 37px;
		}

		.reset {
			color: #406CEB;
			border: 1px solid rgba(64, 108, 235, 1);
			background: #FFFFFF;
		}

		.save {
			background: #406CEB;
			color: #FFFFFF;
		}
	}
</style>
